<template>
	<view style="background: #fff;width: 100vw;height: 100vh;">
		<view class="mui_title">
			<view class="welcome">输入验证码</view>
			<view class="side">验证码已发送至<span class="sendtel">{{phoneNum}}</span></view>
		</view>
		<view class="mui_input">
			<view class="mui-input-row" id="verCodeInput" style="height: 80rpx;width: 60%;">
				<input type="number" placeholder="请输入验证码" v-model="codelogin" maxlength="6" style="height: 80rpx;">
			</view>
			<view class="verCodeBtn" style="height: 80rpx;" :style="disabletf?'opacity: 0.5':'opacity:1'"
				@click="getVerifiCode()">
				{{code_time}}
			</view>
		</view>
		<view class="mui_btn">
			<button id="login" class="startCodeLogin" @click="login_code()">登 录</button>
		</view>
	</view>
</template>

<script>
	import {
		showTishi
	} from 'utils/index.js'
	import { handleLogin } from '@/common/api/login.js';
	// import CryptoJS from 'crypto-js';
	import { Base64 } from '@/common/js_sdk/js-base64';
	import md5 from '@/common/js_sdk/js-md5/src/md5.js';
	import {
		verify
	} from '@/common/api/index.js'
	export default {
		data() {
			return {
				phoneNum: '',
				code_time: '获取验证码',
				disabletf: false,
				codelogin:'',
				btnFlag: false
			}
		},
		onLoad(phone) {
			this.phoneNum = phone.phone
			if (this.phoneNum != '') {
				this.getVerifiCode()
			}
		},
		methods: {
			changeRadio() {
				this.btnFlag = !this.btnFlag
			},
			login_code(){
				var _this = this
				if (_this.codelogin=='') {
					showTishi('请输入验证码')
				} else if (_this.codelogin.length !== 6) {
					showTishi('请输入正确的验证码')
				} else {
					var key_str = md5(_this.phoneNum);
					// var key = CryptoJS.enc.Utf8.parse(key_str);
					// var AESPass = CryptoJS.AES.encrypt(_this.codelogin, key, {
					// 	mode: CryptoJS.mode.ECB,
					// 	padding: CryptoJS.pad.Pkcs7
					// });
					var pass = AESPass.toString();
					var authData = Base64.encode(_this.phoneNum + ':' + pass).replace(/[\r\n]/g, '');
					handleLogin(authData, true);
				}
			},
			// 获取验证码
			getVerifiCode() {
				var _this = this
				if (_this.disabletf) {
					return
				}
				verify({
						phone_number: _this.phoneNum
					})
					.then(res => {
						if (res.status == 0) {
							_this.countDown(60)
							showTishi('已发送验证码')
						} else {
							showTishi(res.detail);
						}
					})

			},
			countDown(s) {
				var _this = this
				s--;
				if (s == 0) {
					_this.code_time = '获取验证码';
					_this.disabletf = false
				} else {
					_this.code_time = s + '秒后可重发';
					_this.disabletf = true
					setTimeout(function() {
						_this.countDown(s);
					}, 1000)
				}
			},
			publicJump(url, title) {
				uni.navigateTo({
					url: '/pages/public_jump?url=' + url + '&title=' + title
				})
			},
		}

	}
</script>

<style lang="scss" scoped>
	.mui_title {
		padding-top: 1rem;
		padding-left: 3rem;
		padding-bottom: 80rpx;
		/* padding: 50px 20px; */
		padding-left: 1.5rem;
		padding-top: 120rpx;
	}

	.welcome {
		font-size: 50rpx;
		font-weight: bold;
		color: #333;
	}

	.side {
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #666;
	}

	.mui_input {
		margin: 0 1rem 60rpx;
		position: relative;
		border: 2rpx solid #eee;
		padding-left: 20rpx;
	}

	.verCodeBtn {
		position: absolute;
		background-color: #0172FF;
		color: white;
		text-align: center;
		width: 300rpx;
		line-height: 80rpx;
		height: 80rpx;
		right: 0;
		top: 0px;
		font-size: 26rpx;
	}

	.sendtel {
		color: #000;
		padding-left: 10rpx;
		font-weight: bold;
	}

	.startCodeLogin {
		width: calc(100% - 40px);
		background-color: #0172FF;
		color: #fff;
		border: none;
		height: 2.5rem;
		border-radius: 0.3125rem;
		font-size: 30rpx;
		font-weight: 600;
	}
</style>
